<template>
  <div
    id="report-modal"
    class="report-modal"
    style="display: block"
  >
    <div class="report-modal-container">
      <div class="modal-header">
        选择举报原因
        <img
          @click="Report"
          class="close-icon"
          src="https://p0.meituan.net/ingee/ad871dc016906c0a34ec5f7ae046bd67385.png"
        />
      </div>
      <div class="modal-content">
        <table class="report-label" cellspacing="0">
          <tbody>
            <tr>
              <td style="margin-right: 12px">
                <span>政治敏感</span>
              </td>
              <td style="margin-right: 12px">
                <span>暴力恐怖</span>
              </td>
              <td><span>违法违规</span></td>
            </tr>
            <tr>
              <td style="margin-right: 12px">
                <span>辱骂攻击</span>
              </td>
              <td style="margin-right: 12px">
                <span>淫秽色情</span>
              </td>
              <td><span>垃圾广告</span></td>
            </tr>
            <tr>
              <td style="margin-right: 12px">
                <span>盗版抄袭</span>
              </td>
              <td style="margin-right: 12px">
                <span>涉未成年人</span>
              </td>
              <td><span>其他</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TtmsReport',

  data () {
    return {
      report: false,
      id: 0
    }
  },
  props:{
    reportId: {
      type: Number,
      default: -1
    }
  },

  mounted () {
    this.$bus.$on('report', (data) => {
      this.id = data
    }
    )
  },

  methods: {
    Report () {
      this.$bus.$emit('update:report', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.report-modal {
  width: 364px;
  position: fixed;
  top: 100px;
  left: 300px;
  z-index: 1001;
  display: none;
  margin: 10% auto;
  right: 0;
}
.report-modal .report-modal-container {
  background-color: #fff;
  z-index: 1001;
  // -webkit-box-shadow: 0 4px 20px 0 rgb(0 0 0 / 50%);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.047);
  border-radius: 2px;
}
.report-modal .report-modal-container .modal-header {
  font-weight: 400;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333;
  padding: 18px 20px;
}
.report-modal .report-modal-container .modal-header .close-icon {
  cursor: pointer;
  display: inline-block;
  width: 14px;
  height: 14px;
  float: right;
}

img {
  border-style: none;
}
.report-modal .report-modal-container .modal-content {
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 0 20px 8px;
}
.report-modal .report-modal-container .modal-content table {
  width: 324px;
}
.report-modal .report-modal-container .modal-content table tr {
  text-align: left;
}
.report-modal .report-modal-container .modal-content table td {
  cursor: pointer;
  padding: 5px 0;
  background: #fff;
  border: 0.5px solid #d5d5d5;
  border-radius: 2px;
  display: inline-block;
  width: 100px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 12px;
}
.report-modal .report-modal-container .modal-content table td:hover {
  background: #f03d37;
  color: #fff;
}
.report-modal .report-modal-container .modal-content table td span {
  font-weight: 400;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  text-align: center;
}
</style>
